<template>
  <li class="cjy-page-body-commodity-li">
    <div>
      <div class="cjy-page-bod-commodity-box">
        <div class="cjy-page-image-box">
          <img class="cjy-page-image-box-img" v-lazy="comInfor.mainPic" :key="comInfor.mainPic" @click="gotoDetail">
        </div>
        <div class="cjy-page-title-box">
          <span style="">{{goodsName || '\r'}} </span>
        </div>
        <div class="cjy-page-lable-box">
          <span class="cjy-lable"> {{regularTypeLabel }} </span>
        </div>
        <div class="cjy-page-price-box">
          ¥<span class="cjy-price">{{showWsPrice}}</span>
          <span class="cjy-price-unit" v-if="showUnit">/{{showUnit}}</span>
        </div>

        <div class="cjy-add-cart-button-box" @click="cartButtonOnClick">
          <update-cart
            ref="updateCart"
            :addCartButtonType="0"
            :commodityInfor="comInfor"
            :goodsId="goodsId">
            <div slot="button" slot-scope="props">
              <button-change-cart :type="2" fontSize="1.2rem" :style="buttonStyle">
              </button-change-cart>
            </div>
          </update-cart>
        </div>
      </div>
    </div>
  </li>
</template>

<script>
  import UpdateCart from '@/real-components/UpdateCart'
  import lazyLoad from 'vue-lazyload'
  import ButtonChangeCart from '@/real-components/ButtonChangeCart/icon'
  import minxinAuto from '../mixinAuto.vue'
  export default {
    mixins: [minxinAuto],
    components: {UpdateCart, ButtonChangeCart},
  }
</script>

<style scoped>
  .cjy-page-body-commodity-li {
    position: relative;
    float: left;
    width: 33.3%;
    height: 0;
    padding-bottom: 50%;
    margin-bottom: 0.5rem;
  }

  .cjy-page-body-commodity-li > div {
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 0 0.1rem;
  }

  .cjy-page-bod-commodity-box {
    width: 100%;
    height: 100%;
    background: white;
    position: relative;
    border-radius: 0.3rem;
    overflow: hidden;
  }

  .cjy-page-title-box, .cjy-page-lable-box, .cjy-page-price-box {
    padding: 0 0.3rem;
    text-align: left;
  }

  .cjy-page-title-box {
    font-weight: 600;
    font-size: 0.6rem;
  }

  .cjy-page-image-box {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 90%;
    overflow: hidden
  }

  .cjy-page-lable-box {

  }

  .cjy-page-lable-box > .cjy-lable {
    display: inline-block;
    border-radius: 0.4rem;
    border: 1px solid red;
    font-size: 0.4rem;
    color: red;
    padding: 0.05rem 0.1rem 0;
  }

  .cjy-page-price-box {
    position: absolute;
    bottom: 0;
    width: 100%;
    margin-bottom: 0.4rem;
    font-size: 0.4rem;
    color: rgb(255, 115, 32);
    padding: 0 0.4rem;
  }

  .cjy-page-price-box > .cjy-price {
    font-size: 0.7rem;
    font-weight: 400;
    color: rgb(255, 115, 32);
  }

  .cjy-page-price-box > .cjy-price-unit {
    color: #B2B4B3;
  }

  .cjy-add-cart-button-box {
    height: 2rem;
    width: 2.2rem;
    position: absolute;
    z-index: 1;
    right: 0;
    bottom: 0;
    padding: 0.3rem 0.6rem 0
  }


</style>
